<template>
  <view>
    <!-- #ifdef MP -->
    <uni-search-bar radius="100" placeholder="搜索你想要的内容" clearButton="auto" cancelButton="always" :focus="focus"
      :textValue="inputContent" @cancel="navBack()" @confirm="doSearch"></uni-search-bar>
    <!-- #endif -->

    <!-- 热门搜索建议以及历史搜索记录的展示 -->
    <key-word v-if="!searched" @doSearch="doSearch" @clickChange="clickTagHandler"></key-word>
    <!-- 标签导航的数据 -->
    <tab-bar v-if="searched" @changeTab="changeTab" :tabIndex="tabIndex"></tab-bar>

    <!-- 标签导航的内容展示区域 -->
    <block v-if="searched">
      <course-list ref="mescrollItem0" :i="0" :index="tabIndex" :params="state.params" :inputContent="inputContent">
      </course-list>
      <article-list ref="mescrollItem1" :i="1" :index="tabIndex" :params="state.params" :inputContent="inputContent">
      </article-list>
      <question-list ref="mescrollItem2" :i="2" :index="tabIndex" :params="state.params" :inputContent="inputContent">
      </question-list>
    </block>

  </view>
</template>


<script setup lang="ts">
  import {
    onLoad,
    onNavigationBarButtonTap,
    onNavigationBarSearchInputChanged,
    onNavigationBarSearchInputConfirmed,
    onNavigationBarSearchInputClicked,
    onNavigationBarSearchInputFocusChanged
  } from '@dcloudio/uni-app'
  import {
    reactive,
    ref,
    getCurrentInstance,
    nextTick
  } from "vue"
  import keyWord from './component/keyWord.vue'
  import tabBar from '@/components/common/tab-bar.vue'
  import downBar from './component/down-bar.vue'
  import courseList from './component/course-list.vue'
  import articleList from './component/article-list.vue'
  import questionList from './component/question-list.vue'
  const {
    proxy
  } = getCurrentInstance()
  const state = reactive({
    params: {}
  })
  const inputContent = ref("")
  const focus = ref(false)
  // 判断是否点击搜索热门搜索或历史搜索内容
  const searched = ref(false)
  const tabIndex = ref(0)
  let mescrollItem0 = ref()
  let mescrollItem1 = ref()
  let mescrollItem2 = ref()
  // #ifdef APP-PLUS
  const currentWebview = proxy.$scope.$getAppWebview();
  // #endif

  // 热门搜索以及历史数据的点击事件
  const clickTagHandler = (content) => {
    // 数据回显到搜索框
    // #ifdef APP-PLUS
    currentWebview.setTitleNViewSearchInputText(content.title)
    // #endif

    // #ifdef H5
    const placeholder = document.querySelector('.uni-page-head-search-placeholder')
    placeholder.innerHTML = ''
    const inputSearch = document.querySelector('.uni-input-input')
    inputSearch.value = content.title
    // #endif
    // 触发搜索事件
    doSearch({
      value: content.title
    })
  }


  onLoad((option) => {
    if (option.params) {
      state.params = JSON.parse(option.params)
      doSearch()
    } else {
      // 当点击搜索图标，小程序端的搜索内容框自动获取焦点
      // #ifdef MP
      focus.value = true
      // #endif
    }
  })

  // 搜索方法
  const doSearch = (obj) => {
    inputContent.value = obj && obj.value ? obj.value : inputContent.value
    searched.value = true
    // uni.showLoading()
    getHistoryList()
    
    nextTick(() => {
     // 节流处理
     proxy.$utils.throttle(()=>{
       if(tabIndex.value === 0){
         mescrollItem0.value.search()
       } else if(tabIndex.value === 1){
         mescrollItem1.value.search()
       } else if(tabIndex.value === 2){
           mescrollItem2.value.search()
         }
     },1000)
    })
  }

  // 获取本地搜索历史数据
  const getHistoryList = () => {
    const key = "HISTORY_KEY"
    let storageList = [];
    uni.getStorage({
      key,
      success: (res) => {
        // 判断是否新增历史记录的条件
        if (inputContent.value && res.data.indexOf(inputContent.value) < 0) {
          storageList = [inputContent.value, ...res.data]
        }
        // 新增本地历史记录
        uni.setStorageSync(key, storageList)
      },
      fail: (error) => {
        // 如果一开始本地没存储则进行添加
        inputContent.value && uni.setStorage({
          key,
          data: [inputContent.value]
        });
      }
    })

  }

  // 监听原生输入框内容变化事件
  onNavigationBarSearchInputChanged((e) => {
    inputContent.value = e.text
  })
  // 监听用户键盘上的 搜索 按钮点击事件
  onNavigationBarSearchInputConfirmed((e) => {
    currentWebview.setTitleNViewSearchInputFocus(false)
    doSearch()
  })
  // 监听原生按钮点击事件(取消按钮)
  onNavigationBarButtonTap((e) => {
    if (e.index === 0) {
      proxy.navBack()
    }
  })

  // 点击标签栏的事件
  const changeTab = (index) => {
    tabIndex.value = index
  }
</script>

<style>

</style>
